<template>
    <main>
        <div class="ml-st-hero ml-wrapper">
            <div class="container">
                <div class="row md-reverse">
                    <div class="col-md-5"><img src="../assets/st_hero.c5b16.svg" alt="hero"></div>
                    <div class="col-md-7 jumbotron"><h3>{{$t('education_banner_title')}}</h3>
                        <h3 class="bold">{{$t('education_banner_desc')}}</h3><a
                            href="/signup?utm_source=website&amp;utm_medium=education&amp;edu=1"
                            class="ml-btn solid large">{{$t('education_banner_button')}}</a></div>
                </div>
            </div>
        </div>

        <div class="ml-st-feature ml-wrapper">
            <div class="container">
                <div class="row md-reverse">
                    <div class="col-md-4">
                        <div class="content"><img src="../assets/st_ic64_1.e6b5b.svg" alt="feature">
                            <div class="title">{{$t('education_feature_li_1_title')}}</div>
                            <p>{{$t('education_feature_li_1_desc')}}</p></div>
                    </div>
                    <div class="col-md-4">
                        <div class="content"><img src="../assets/st_ic64_2.5b52a.svg" alt="feature">
                            <div class="title">{{$t('education_feature_li_2_title')}}</div>
                            <p>{{$t('education_feature_li_2_desc')}}</p></div>
                    </div>
                    <div class="col-md-4">
                        <div class="content"><img src="../assets/st_ic64_3.4b8ed.svg" alt="feature">
                            <div class="title">{{$t('education_feature_li_3_title')}}</div>
                            <p>{{$t('education_feature_li_3_desc')}}</p></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="ml-st-step ml-wrapper" id="ml-st-step">
            <div class="container"><h3>{{$t('education_step_title')}}</h3>
                <div class="row">
                    <div class="col-lg-4 col-md-0 none"><img src="../assets/st_step.bc40d.svg" class="step-img" alt="hero">
                    </div>
                    <div class="col-lg-8 col-12 step">
                        <div class="item-step">
                            <div class="icon"><i class="ri-file-edit-line"></i></div>
                            <div class="content">
                                <div class="title">{{$t('education_step_li_1_title')}}</div>
                                <p>{{$t('education_step_li_1_desc')}}</p></div>
                            <a href="/education-apply" class="ml-btn outline small none">{{$t('education_step_button')}}</a></div>
                        <div class="item-step">
                            <div class="icon"><i class="ri-mail-line"></i></div>
                            <div class="content">
                                <div class="title">{{$t('education_step_li_2_title')}}</div>
                                <p>{{$t('education_step_li_2_desc')}}</p></div>
                        </div>
                        <div class="item-step">
                            <div class="icon"><i class="ri-wallet-3-line"></i></div>
                            <div class="content">
                                <div class="title">{{$t('education_step_li_3_title')}}</div>
                                <p>{{$t('education_step_li_3_desc')}}</p></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="ml-st-faq ml-wrapper">
            <div class="container"><h3>{{$t('education_faq_title')}}</h3>
                <div class="item-faq"  :class="item.status ? 'active' : ''" v-for="(item, key) in faq" :key="key" @click="selectFaq(item.status, key)">
                    <div class="title accordion"><span>{{ item.title }}</span>
                        <div class="icon"><i class="ri-arrow-down-s-line"></i></div>
                    </div>
                    <div class="content panel">{{ item.desc }}</div>
                </div>
            </div>
        </div>
    </main>
</template>

<script>
export default {
    name: "Education",
    data() {
        return {
            faq: [
                {
                    title: this.$t('education_faq_li_1_title'),
                    desc: this.$t('education_faq_li_1_desc'),
                    status: false
                },
                {
                    title: this.$t('education_faq_li_2_title'),
                    desc: this.$t('education_faq_li_2_desc'),
                    status: false
                },
                {
                    title:this.$t('education_faq_li_3_title'),
                    desc: this.$t('education_faq_li_3_desc'),
                    status: false
                }
            ]
        }
    },
    methods: {
        selectFaq(status, index) {
            if (status) {
                this.faq[index].status = false
            } else {
                this.faq[index].status = true
            }
        }
    }
}
</script>

<style scoped lang="scss">
@media (max-width: 767.98px) {
    .ml-st-step {
        h3 {
            font-size: 36px!important;
            text-align: center;
        }
        .row {
            margin-top: 56px;
        }
        .step {
            padding: 0!important;
            .item-step {
                padding: 0 16px!important;
            }
        }
    }
    .none {
        display: none!important;
    }
}
main {
    .ml-st-hero {
        padding: 118px 0 78px;
        background: #FBFBFF;
        align-items: center;

        .md-reverse {
            img {
                margin-left: 80px;
            }
        }

        .jumbotron {
            background: none;

            h3 {
                font-size: 46px;
                font-weight: 400;
                color: #232323;
            }

            a {
                margin-top: 32px;
                height: 50px;
                padding: 0 46px;
                font-weight: 500;
                font-size: 16px;
                background: #4D55E8;
                color: #fff;
                display: inline-flex;
                justify-content: center;
                border-radius: 4px;
                transition: all .2s ease;
            }
        }
    }

    .ml-st-feature {
        margin-top: 48px;

        .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 32px 40px;

            .title {
                margin-top: 16px;
                font-size: 18px;
            }

            p {
                text-align: center;
                line-height: 1.64;
                font-size: 13px;
                margin-top: 16px;
                color: #7B7B7B;
            }
        }
    }

    .ml-st-step {
        padding-top: 96px;

        .step {
            padding-left: 68px;

            .item-step {
                display: flex;
                align-items: center;
                height: 124px;
                box-shadow: inset 0 -1px 0 #eaeaea;

                .icon {
                    width: 56px;
                    height: 56px;
                    border-radius: 50%;
                    background: #F2F3FF;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 32px;
                    flex-shrink: 0;

                    i {
                        font-size: 24px;
                        color: #4D55E8;
                    }
                }

                .content {
                    .title {
                        font-size: 18px;
                    }

                    p {
                        margin-top: 8px;
                        font-size: 14px;
                        line-height: 1.6;
                        color: #7B7B7B;
                    }
                }

                a {
                    margin-top: 0;
                    margin-left: auto;
                    height: 38px;
                    padding: 0 32px;
                    font-size: 14px;
                    color: #4D55E8;
                    font-weight: 500;
                    border: 1px solid #4D55E8;
                    display: inline-flex;
                    justify-content: center;
                    border-radius: 4px;
                    transition: all .2s ease;
                    cursor: pointer;
                    background: none;
                }
            }
        }
    }

    .ml-st-faq {
        margin-top: 96px;
        padding-top: 72px;
        padding-bottom: 108px;
        background: #FBFBFF;

        h3 {
            font-size: 40px;
            text-align: center;
            font-weight: 400;
            color: #222;
            line-height: 1.5;
            margin-bottom: 40px;
        }

        .item-faq {
            margin: 0 auto 24px;
            max-width: 966px;
            background: #FFF;
            box-shadow: 0 3px 8px rgb(0 0 0 / 8%);
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 24px;

            .title {
                display: flex;
                align-items: center;
                cursor: pointer;
                padding: 32px 0;

                span {
                    font-size: 18px;
                }

                .icon {
                    margin-left: auto;
                    color: #4D55E8;
                    transition: all .2s ease;

                    i {
                        font-size: 24px;
                    }
                }
            }

            .content {
                display: none;
                margin-top: -16px;
                font-size: 14px;
                line-height: 1.67;
                color: #666;
                margin-bottom: 24px;
            }
        }
        .active {
            .panel {
                display: block!important;
            }
            .icon {
                transform: rotateX(
                        180deg
                );
            }
        }
    }
}
</style>
